<!--  -->
<template>
  <div class="login">
    <div class="lg-hd">
      <div class="lg-tl">{{ type == 1 ? "验证码登录" : "密码登录" }}</div>
      <div class="lg-tx">
        {{
          type == 1
            ? "首次登录手机号将在验证后生成新账号"
            : "使用已注册的手机号登录"
        }}
      </div>
    </div>
    <div class="lg-main">
      <div class="lg-ipt-gp">
        <div class="lg-ipt-tl">手机号</div>
        <div class="lg-ipt-box">
          <input
            class="lg-ipt"
            v-model="phone"
            type="number"
            placeholder="请输入手机号"
          />
        </div>
        <div class="tip-error" :class="isPhone ? 'on' : ''">
          请输入正确的手机号
        </div>
      </div>
      <div class="lg-ipt-gp" v-if="type == 1">
        <div class="lg-ipt-tl">验证码</div>
        <div class="lg-ipt-box">
          <input
            class="lg-ipt"
            v-model="code"
            type="text"
            placeholder="请输入验证码"
          />
          <div class="code o" v-if="!isTime" @click="getCode">获取验证码</div>
          <div class="code g" v-else>{{ cutDownTime }}s</div>
        </div>
        <div class="tip-error" :class="isCode ? 'on' : ''">
          请输入正确的验证码
        </div>
      </div>
      <div class="lg-ipt-gp" v-else>
        <div class="lg-ipt-tl">密码</div>
        <div class="lg-ipt-box">
          <input
            class="lg-ipt"
            v-model="password"
            :type="passwordType"
            placeholder="请输入密码"
          />
          <div
            class="eyes"
            :class="[passwordType == 'password' ? '' : 'close-eye']"
            @click="showPassWord"
          ></div>
        </div>
        <div class="tip-error" :class="isPassword ? 'on' : ''">
          请输入正确的密码
        </div>
      </div>
      <div class="joinus">
        <span
          class="check"
          :class="[isJoinCheck ? 'on' : '']"
          @click="agreeJoin"
          >我愿意成为分销员</span
        ><span class="o" @click="gotoJoin">《了解分销员》</span>
      </div>
      <div class="lg-btn" @click="submitLogin">登 录</div>
      <div class="change-box">
        <div class="lg-change" @click="type = type == 1 ? 2 : 1">
          {{ type == 1 ? "密码登录" : "验证码登录" }}
        </div>
        <!-- <div class="forget-password" v-if="type==2">忘记密码？</div> -->
      </div>
    </div>
    <div class="agree-ruls">
      <span class="check" :class="[isCheck ? 'on' : '']" @click="agreeRules"
        >我已阅读并同意</span
      ><span class="o" @click="gotoUserRules">《用户使用协议》</span>和<span
        class="o"
        @click="gotoRules"
        >《隐私协议》</span
      >
    </div>
  </div>
  <div class="mask" v-if="isShowModal">
    <div class="modal">
      <div class="moadl-tl">请阅读并同意一下条款</div>
      <div class="modal-tx">
        我已阅读并同意<span class="o" @click="agreeRules">《用户使用协议》</span
        >和<span class="o" @click="gotoRules">《隐私协议》</span>
      </div>
      <div
        class="modal-btn"
        @click="
          isShowModal = false;
          isCheck = true;
        "
      >
        同意并继续
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";

export default {
  data() {
    return {
      isCheck: false,
      isPhone: false,
      isCode: false,
      isTime: false,
      isJoinCheck: false,
      isShowModal: false,
      cutDownTime: 60,
      phone: "",
      code: "",
      type: 1,
      passwordType: "password",
      isPassword: false,
      isVip: false,
      time: "",
      promotedCode: "",
      promotedType: 0,
    };
  },
  components: {},
  created() {
    const router = useRouter();
    this.back = router.options.history.state.back;
    const code = this.$route.query.invitationCode
      ? this.$route.query.invitationCode
      : "";
    const type = this.$route.query.type ? parseInt(this.$route.query.type) : 0;
    this.promotedCode = code;
    this.promotedType = type;
  },
  methods: {
    getCode() {
      if (!this.checkPhone()) return;
      this.cutDown();
      const params = { p: this.phone };
      this.$http
        .getSmsVc(params)
        .then((res) => {
          if (res.flag == 0) {
            this.countdown = 60;
            this.isCode = false;
            this.timer = setInterval(() => {
              this.countdown--;
              if (this.countdown <= 0) {
                this.isCode = true;
                this.countdown = 0;
              }
            }, 1000);
          }
        })
        .catch((err) => {
          //   ElMessage.warning(err.response.data.message);
        });
    },
    //验证码倒计时
    cutDown() {
      this.isTime = true;
      this.cutDownTime = 60;
      const time = setInterval(() => {
        this.cutDownTime--;
        if (this.cutDownTime == 0) {
          clearInterval(time);
          this.isTime = false;
        }
      }, 1000);
    },
    submitLogin() {
      if (this.type == 1) {
        //验证验证码是否输入
        this.loginPhone();
      } else {
        //密码登录
        this.loginPassword();
      }
    },
    //密码登录
    loginPassword() {
      if (!this.checkPhone()) return;
      // if (this.isEmpty(this.code)) {
      //   this.isCode = true;
      //   return;
      // }
      if (!this.isCheck) {
        this.isCode = false;
        this.isShowModal = true;
        return;
      }
      var params = {
        loginPlatform: 1, //登录平台
        expireTime: 86400, //过期时间
        phoneNum: this.phone, //手机号
        password: this.password, //验证码
        beToAgent: this.isJoinCheck == true ? 1 : 0,
      };
      this.$http
        .loginPp(params)
        .then((res) => {
          // this.loginDeal(res, exp);
          localStorage.setItem("access_token", res.data.token);
          const type = this.$route.query.actionType;
          if (type == 5 || type == 6) {
            this.$router.push("/res/share");
          } else {
            this.getUserInfor();
          }
        })
        .catch((err) => {
          if (err.response.status == 462) {
            this.isPassword = true;
          }
          // ElMessage.error(err.response.data.message);
        });
    },
    //验证验证码是否输入
    loginPhone() {
      if (!this.checkPhone()) return;
      if (this.isEmpty(this.code)) {
        this.isCode = true;
        return;
      }
      if (!this.isCheck) {
        this.isCode = false;
        this.isShowModal = true;
        return;
      }
      var params = {
        loginPlatform: 1, //登录平台
        expireTime: 86400, //过期时间
        mobile: this.phone, //手机号
        code: this.code, //验证码
        beToAgent: this.isJoinCheck == true ? 1 : 0,
        promotedType: this.promotedType, //推广类型
        promotedCode: this.promotedCode, //推广码
      };
      this.$http
        .loginPn(params)
        .then((res) => {
          localStorage.setItem("access_token", res.data.token);
          const type = this.$route.query.actionType;
          if (type == 5 || type == 6) {
            this.$router.push("/res/share");
          } else {
            this.getUserInfor();
          }
        })
        .catch((err) => {
          //   ElMessage.error(err.response.data.message);
        });
    },
    checkPhone() {
      //验证手机号是否为空和是否输入正确
      let boolPhoneNum = false;
      if (!this.isEmpty(this.phone)) {
        var regex = /^1[3-9]\d{9}$/;
        if (!regex.test(this.phone)) {
          this.isPhone = true;
        } else {
          this.isPhone = false;
          boolPhoneNum = true;
        }
      } else {
        this.isPhone = true;
      }
      return boolPhoneNum;
    },
    isEmpty(obj) {
      if (
        typeof obj == "undefined" ||
        obj == null ||
        obj === "" ||
        (obj + "".trim()).toString().length == 0
      ) {
        return true;
      } else {
        return false;
      }
    },
    showPassWord() {
      this.passwordType = this.passwordType == "password" ? "text" : "password";
    },
    agreeRules() {
      this.isCheck = !this.isCheck;
    },
    gotoUserRules() {
      window.location.href =
        "https://cdn.zmylschool.com/zmylschool/html/cheersDoctorAgreement.html";
    },
    gotoRules() {
      window.location.href =
        "https://cdn.zmylschool.com/zmylschool/html/cheersDoctorSecretright.html";
    },
    getUserInfor() {
      // const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      // this.userInfo = userInfo || {};
      this.$http
        .getUserHalo()
        .then((res) => {
          if (res.flag == 0) {
            for (var i = 0; i < res.data.length; i++) {
              if (res.data[i].code == 1) {
                const newTime = new Date().getTime();
                if (newTime <= res.data[i].expiration) {
                  this.isVip = true;
                  const time = res.data[i].expiration;
                  this.time = this.getDate(time).split(" ")[0];
                  localStorage.setItem("vipTime", this.time);
                }
              }
            }
            localStorage.setItem("isVip", this.isVip);
            if (this.back) {
              this.$router.push(this.back);
            } else {
              this.$router.push("/vip");
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 时间戳 转 日期
    getDate(date) {
      var t = new Date(Number(date)).toLocaleString();
      return t;
    },
    agreeJoin() {
      this.isJoinCheck = !this.isJoinCheck;
    },
    gotoJoin() {
      this.$router.push("/poster");
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
